<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ include file="../../common/common.jsp" %>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>角色列表 - ${title }</title>
</head>
<link href="${ctx }/static/plugins/zTree_v3/css/zTreeStyle.css" rel="stylesheet"/>
<body
		<%@ include file="../../common/skin.jsp" %>
>
<%@ include file="../../common/head.jsp" %>
<%@ include file="../../common/menu.jsp" %>
<div class="J_content">
	<div class="mt20 plr20">
		<form action="${ctx }/information/theInteractiveMessage" id="queryForm" method="POST">
			<div class="J_toolsBar clearfix">
				<select name="auditFlag" class="t_text ml10" style="border-radius: 6px">
					<option value="-1" selected>-是否处理-</option>
					<option value="1" <c:if test="${messageInteractionQueryDTO.auditFlag == '1'}">selected</c:if>>已处理
					</option>
					<option value="0" <c:if test="${messageInteractionQueryDTO.auditFlag == '0'}">selected</c:if>>等待处理
					</option>
				</select>
				<%--<input placeholder="请输入角色名称" type="text" name="name" value="${roleQueryDTO.name }"/>--%>
				<div class="t_button mgl30">
					<a class="abtn red" href="javascript:myQuery();">
						<i class="icon"></i>查询
					</a>
				</div>
				<div class="t_label ml10">
					记录数：<label style="color: red;" id="total">${page.totalCount }</label>
				</div>
			</div>
			<div class="J_toolsBar clearfix">
				<div class="t_button ml10">
					<a class="abtn blue" href="javascript:allCheck('choice',true);">
						<i class="icon"></i>全选
					</a>
				</div>
				<div class="t_button ml10">
					<a class="abtn blue" href="javascript:allCheck('choice',false);">
						<i class="icon"></i>全不选
					</a>
				</div>
				<div class="t_button ml10">
					<a class="abtn blue" href="javascript:reserveCheck('choice');">
						<i class="icon"></i>反选
					</a>
				</div>
				<div class="t_button ml10">
					<a class="abtn blue" href="javascript:batching('choice');">
						<i class="icon"></i>批处理
					</a>
				</div>
			</div>
			<div class="J_table mt20">
				<div class="t_table">
					<table>
						<thead>
						<tr>
							<td>
								<span>选择  </span>
							</td>
							<td>
								<span>序号</span>
							</td>
							<td>
								<span>联系人</span>
							</td>
							<td>
								<span>联系人电话</span>
							</td>
							<td>
								<span>留言内容</span>
							</td>
							<td>
								<span>创建时间</span>
							</td>
							<td>
								<span>状态</span>
							</td>
							<td>
								<span>操作</span>
							</td>
						</tr>
						</thead>
						<tbody>
						<c:choose>
							<c:when test="${page.list != null && page.totalCount > 0 }">
								<c:forEach items="${page.list }" var="r" varStatus="status">
									<tr>
										<td class="first">
											<div class="t_text tc">
												<input type="checkbox" name="choice" value="${r.id}" id="choice"
													   width="30px;"/>
											</div>
										</td>
										<td class="first">
											<div class="t_text tc">
													${status.index+1 }
											</div>
										</td>
										<td>
											<div class="t_text tc">
													${r.linkman }
											</div>
										</td>
										<td>
											<div class="t_text tc">
													${r.phone }
											</div>
										</td>
										<td>
											<div class="t_text tc">
												<c:if test="${fn:length(r.message)<=17}">
													${r.message}
												</c:if>
												<c:if test="${fn:length(r.message)>17}">
													${fn:substring(r.message,0,17)}...
												</c:if>
											</div>
										</td>
										<td>
											<div class="t_text tc">
												<fmt:formatDate value="${r.createDate }" pattern="yyyy-MM-dd HH:mm:ss"/>
											</div>
										</td>
										<td>
											<div class="t_text tc">
													${r.auditFlag == "0" ? "等待处理" : "已处理"}
											</div>
										</td>
										<td>
											<div class="t_link">
												<a href="javascript:myEdit('${r.id }');"><i class="icon"></i>查看详情</a>
												<c:if test="${r.auditFlag == 0}">
													<a href="javascript:updAuditFlag('${r.id }', '1');"><i
															class="icon"></i>处理</a>
												</c:if>
											</div>
										</td>
									</tr>
								</c:forEach>
							</c:when>
							<c:otherwise>
								<tr>
									<td colspan="6">
										<div class="J_null mt40">
											<img src="${ctx }/static/images/null.png">
											<p>暂无相关数据</p>
										</div>
									</td>
								</tr>
							</c:otherwise>
						</c:choose>
						</tbody>
					</table>
				</div>
				<%@ include file="../../common/pager.jsp" %>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript" src="${ctx }/static/plugins/zTree_v3/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
	<%--跳转页面到编辑页--%>

	function myEdit(id) {
		var loadIdx = layer.load();
		var title = '详情预览';
		$.post('${ctx}/information/theInteractiveMessage/edit?id=' + id, {}, function (str) {
			layer.close(loadIdx);
			layer.open({
				title: title,
				type: 1,
				area: ['600px', '600px'],
				content: str,
				btn: ['确定', '取消'],
				yes: function (index, layero) {
					layer.close(index);
				},
				btn2: function (index, layero) {
					layer.close(index);
				}
			});
		});
	}

	function batching(name) {
		var str = toMyString(name);
		if (str == null || str.length === 0) {
			layer.alert("请先勾选");
			return;
		}
		updAuditFlag(str, '1');
	}

	//全选和全不选（第一个参数为复选框名称，第二个参数为是全选还是全不选）
	function allCheck(name, boolValue) {
		var allvalue = document.getElementsByName(name);
		for (var i = 0; i < allvalue.length; i++) {
			if (allvalue[i].type == "checkbox")
				allvalue[i].checked = boolValue;
		}
	}

	//反选 参数为复选框名称
	function reserveCheck(name) {
		var revalue = document.getElementsByName(name);
		for (i = 0; i < revalue.length; i++) {
			if (revalue[i].checked == true)
				revalue[i].checked = false;
			else
				revalue[i].checked = true;
		}
	}

	//拼成字符串方便传递到后端控制层处理
	function toMyString(name) {
		var myvalue = document.getElementsByName(name);
		var myName = "";
		for (var i = 0; i < myvalue.length; i++) {
			if (myvalue[i].checked) {
				myName += myvalue[i].value + ",";
			}
		}
		return myName;
	}

	function mySubmit() {
		$('#editForm').submit();
	}

	function myQuery() {
		$('#queryForm').submit();
	}

	function updAuditFlag(id, auditFlag) {
		var content = '确定要执行操作吗？';
		layer.confirm(content, function (index) {
			layer.close(index);
			var loadIdx = layer.load();
			$.ajax({
				url: '${ctx}/information/theInteractiveMessage/auditFlag',
				type: 'post',
				data: {
					'id': id,
					'auditFlag': auditFlag
				},
				traditional: true,
				success: function (result) {
					layer.close(loadIdx);
					if (result.success) {
						layer.alert('操作成功', function () {
							window.location.reload();
						});
					} else {
						layer.alert('操作失败');
					}
				}
			});
		});
	}
</script>
</body>
</html>